<template>
  <div class="vx-input-amount-range" :title="title">
    <ui-input-business
      class="smalls"
      v-model="min"
      placeholder="起始金额"
      :maxlength="maxlength"
      @revert="setMinValue"
      @blur="getValue"
    ></ui-input-business>
    <span class="vx-input-line">{{ mediumIcon }}</span>
    <ui-input-business
      class="smalls"
      v-model="max"
      placeholder="结束金额"
      :maxlength="maxlength"
      @revert="setMaxValue"
      @blur="getValue"
    ></ui-input-business>
  </div>
</template>

<script>
import AddNumber from './commonAddNumber.js';
export default {
  name: 'vx-input-amount-range',
  props: {
    minValue: {
      type: String,
      default: '',
    },
    maxValue: {
      type: String,
      default: '',
    },
    maxlength: {
      type: String,
      default: '15',
    },
    mediumIcon: {
      type: String,
      default: '-',
    },
    title: {
      type: String || Number,
      default: '',
    },
  },
  data() {
    return {
      min: this.minValue, // 最小金额
      max: this.maxValue, // 最大金额
    };
  },
  watch: {
    minValue(newVal) {
      this.min = newVal;
    },
    maxValue(newVal) {
      this.max = newVal;
    },
  },
  methods: {
    /**
     * @description 设置最小值
     */
    setMinValue(val) {
      this.min = val;
    },
    /**
     * @description 设置最大值
     */
    setMaxValue(val) {
      this.max = val;
    },
    /**
     * @description 获取输入的范围
     */
    getValue() {
      let max = !this.max ? '' : AddNumber(this.max);
      let min = !this.min ? '' : AddNumber(this.min);
      this.$emit('getValues', { min: min, max: max });
    },
  },
};
</script>

<style lang="scss">
.vx-input-amount-range {
  width: 300px;
  height: 38px;
  background: #ffffff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  color: #909399;
  line-height: 14px;
  .ui-input--default {
    height: 38px !important;
    .ui-input__inner {
      width: 100%;
      border: none !important;
      padding-right: 0;
      height: 38px;
    }
  }
  .smalls,
  .ui-input,
  .ui-input--large {
    width: 140px !important;
    height: 38px !important;
  }
}
</style>
